<template>
	<a-card v-loading="loading">
		<a-row>
			<a-col :span="8">
				<div class="text-center item_wrap" style="margin-right:20px">
					<p class="text-center title">分享二维码</p>
					<el-image :src="shareData.qrcode_url">
						<div slot="error" class="image-slot">
							<i class="el-icon-picture-outline" />
						</div>
					</el-image>
					<p>右键点击复制图片</p>
				</div>
			</a-col>
			<a-col :span="16">
				<div class="item_wrap" style="width: 150px;">
					<p class="text-center title">小程序链接</p>
					<p>{{ shareData.alipay_url }}</p>
					<!-- <el-button v-clipboard:copy="shareData.alipay_url" v-clipboard:success="onCopy"
						v-clipboard:error="onError" style="width:fit-content;" size="mini">复制</el-button> -->
				</div>
			</a-col>
		</a-row>
	</a-card>
</template>

<script>
	import {
		userShare
	} from '@/api/goods'
	import html2canvas from 'html2canvas'
	export default {
		name: 'channel',
		components: {},
		data() {
			return {
				shareData: {},
				loading: false,
			}
		},
		create() {},
		mounted() {
			this.getList()
		},
		methods: {
			createPoster() {
				setTimeout(() => {
					// 生成海报
					html2canvas(document.getElementById('posterHtml'), {
						useCORS: true, // （图片跨域相关）
						allowTaint: false // 允许跨域（图片跨域相关）
					}).then(canvas => {
						this.posterImg = canvas.toDataURL()
						this.loading = false
					}).catch(() => {
						this.loading = false
					})
				}, 1000)
			},
			getList() {
				this.loading = true
				userShare().then(res => {
					this.shareData = res
					this.createPoster()
				}).catch(() => {
					this.loading = false
				})
			},
			// onError() {
			// 	this.$message({
			// 		message: '复制失败',
			// 		type: 'error'
			// 	})
			// },
			// onCopy() {
			// 	this.$message({
			// 		message: '复制成功',
			// 		type: 'success'
			// 	})
			// },
		}
	}
</script>

<style lang="less" scoped>
</style>
